<template>
<div>
<!--  面包屑-->
  <div class="breadcrumb">
    <el-page-header @back="goBack" content="订单管理详情">
    </el-page-header>
  </div>
<!--  筛选-->
  <div class="head">
    <el-input class="search"
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="input"
              style="width: 300px"
    >
    </el-input>
    <el-button :icon="Icon.Search" circle @click="search" />
    <el-button color="#626aef" @click="isEdit0=!isEdit0;isEdit1=!isEdit1"  plain>编辑信息</el-button>
  </div>

<!--订单表格-->
  <div class="table" style="text-align: center;">
    <el-table ref="singleTable" :data="tableData"     stripe    border
             @selection-change="handleSeletion" style=" width:100%; height:560px;text-align: center" :row-style="{height: '50px'}" >

      <el-table-column type="selection" v-model="selectedRow"  width="55px"></el-table-column>
      <el-table-column label="明细" type="expand" style="transition: all 0.5s;" width="60px">
        <template v-slot="{row}"  style="transition: all 0.5s;">
<!--          订单商品信息详情-->
          <el-row>
<!--            当前商品详情-->
            <el-col :span="10">
              <div>
                <div style="position: absolute;margin-top: 25px;margin-left: 45px;writing-mode: vertical-lr"><strong>当前商品</strong></div>
                <el-table :data="row.shoppingList"  :row-style="{height: '45px'}"  style="margin-left: 120px">
                  <el-table-column label="商品代码" prop="shoppingCode" width="100px"></el-table-column>
                  <el-table-column label="商品名称" prop="shoppingName" width="160px"></el-table-column>
                  <el-table-column label="商品数量" prop="shoppingNum" width="100px"></el-table-column>
                  <el-table-column label="商品价格(元)" prop="shoppingPrice" width="130px"></el-table-column>
<!--                  <el-table-column label="总价" prop="shoppingSumPrice" width="100px">{{}}</el-table-column>-->
                </el-table>
              </div>
            </el-col>
<!--            换货商品详情-->
            <el-col :span="10">
                <div v-if="row.type==='换货单'">
                    <div style="position: absolute;margin-top: 25px;margin-left: 45px;writing-mode: vertical-lr"><strong>新的商品</strong></div>
                    <el-table :data="row.newShoppingList" :row-style="{height: '45px'}"   style="margin-left: 120px">
                      <el-table-column label="商品代码" prop="shoppingCode" width="100px"></el-table-column>
                      <el-table-column label="商品名称" prop="shoppingName" width="160px"></el-table-column>
                      <el-table-column label="商品数量" prop="shoppingNum" width="100px"></el-table-column>
                      <el-table-column label="商品价格(元)" prop="shoppingPrice" width="130px"></el-table-column>
                    <!--    <el-table-column label="总价" prop="shoppingSumPrice" width="100px">{{}}</el-table-column>-->
                    </el-table>
                </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <el-table-column type="index" :index="getIndex" label="序号" width="60px">
      </el-table-column>
      <el-table-column label="订单编号" prop="oid" width="280px"></el-table-column>
      <el-table-column label="订单价格(元)" prop="totalPay" width="100px"></el-table-column>
      <el-table-column label="订单状态" width="90px">
        <template v-slot="scope">
          <el-tag effect="dark" size="mini" type="warning" v-if="scope.row.status === '可分配订单'">可分配</el-tag>
          <el-tag effect="dark" size="mini" type="info" v-else-if="scope.row.status==='库房出库订单'">库房已出库</el-tag>
          <el-tag effect="dark" size="mini" type="info" v-else-if="scope.row.status==='分库房到货订单'">已到分库房</el-tag>
          <el-tag effect="dark" size="mini" type="info" v-else-if="scope.row.status==='已分配订单'">已分配</el-tag>
          <el-tag effect="dark" size="mini" type="info" v-else-if="scope.row.status==='已领货订单'">已领货</el-tag>
          <el-tag effect="dark" size="mini" type="success" v-else-if="scope.row.status==='已完成订单'">已完成</el-tag>
          <el-tag effect="dark" size="mini" type="danger" v-else-if="scope.row.status==='无效订单'">已无效</el-tag>

        </template>
      </el-table-column>
      <el-table-column label="订单类别" prop="type" width="100px"></el-table-column>
      <el-table-column label="下单时间" prop="buyTime" width="155px"></el-table-column>
      <el-table-column label="预计到达时间" prop="arriveTime" width="110px"></el-table-column>
      <el-table-column label="发票信息" prop="receiptInfo" width="110px"></el-table-column>
      <el-table-column label="备注" prop="note" width="110px" ></el-table-column>


      <el-table-column label="修改订单状态" width="110px"  style="text-align: center">
        <template v-slot="scope">
          <el-dropdown @command="handleCommand">
            <el-button type="warning" size="small" icon="Edit" style="font-size: 22px; margin-left: 15px;"></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="item in editOrder" :command="{status:item.status,oid:scope.row.oid}">{{ item.status }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </template>


      </el-table-column>

      <el-table-column label="物流信息" width="100px">
        <template v-slot="scope">
<!--          <el-tooltip effect="dark" content="更改订单状态" placement="top" :enterable="false">-->
<!--            <el-button type="warning" size="small" icon="Edit" style="font-size: 22px"  @click="changeOrderStatus(scope.row.oid)"></el-button>-->
          <el-tooltip effect="dark" content="查看物流信息" placement="top" :enterable="false">
            <el-button type="warning" size="small" icon="Van" style="font-size: 22px;margin-left: 10px"  @click="this.isShowForm=!this.isShowForm"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
          property="recv" label="收货人" width="100">
      </el-table-column>
      <el-table-column property="tele" label="联系方式" width="100">
      </el-table-column>
      <el-table-column property="loc" label="地址" width="200px">
      </el-table-column>

    </el-table>
    <el-pagination
        background
        :page-size=pageSize
        :page-sizes="[10,20,30,40]"
        layout="total, prev, pager, next"
        :total=totalSize
        @current-change="pageChange"
        style="margin-top: 15px"
        :current-page=pageNow
    >
    </el-pagination>
  </div>

</div>
  <el-dialog v-model="isShowForm" style=" border-radius: 20px;width: 450px">
      <el-timeline>
        <el-timeline-item timestamp="2023/6/11" placement="top">
          <el-card>
            <h4>货物正在配送中</h4>
            <p>2023/6/11 20:46</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2023/6/11" placement="top">
          <el-card>
            <h4>已到达北京市朝阳区分站库房</h4>
            <p>2023/6/11 10:46</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2023/6/10" placement="top">
          <el-card>
            <h4>已从中心仓库出库</h4>
            <p>2023/6/10 20:46</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
  </el-dialog>
</template>

<script>

import { Delete,Edit,Search,Van } from '@element-plus/icons-vue';
import {request_user} from "@/util/request";

export default {
  name: "OrderManage",
  data() {
    return {
      Icon: {Delete, Edit, Search, Van},
      tableData: [{
        "oid": "2ff895f7d98dbb368c896ba3c7db4752",
        "status": "可分配订单",
        "type": "换货单",
        "recv": "史璐",
        "loc": "中国深圳罗湖区田贝一路260号12栋",
        "tele": "17705393085",
        "totalPay": 655.90,
        "shoppingList": [
          {
            "shoppingNum": 20,
            "shoppingName": "行李及旅行装备",
            "shoppingCode": "BGS-4659",
            "shoppingPrice": 61.07
          },

        ],
        "newShoppingList": [
          {
            "shoppingNum": 111,
            "shoppingName": "dabian",
            "shoppingCode": "7878783",
            "shoppingPrice": 61.07
          }
        ],
        "receiptInfo": "UnionPay",
        "note": "Wedding planner",
        "arriveTime": "2023-07-01",
        "buyTime": "2023-06-28 16:59:52"
      }],
      pageSize: 10,
      totalSize: 100,
      pageNow: 1,
      input: '',//搜索
      loading: false,
      isEdit0: false,
      isEdit1: false,
      isSearch: false,
      form: {
        uid: '',
        username: '',
        tele: '',
        loc: ''
      },
      isShowForm: false,
      editOrder:[
          {status:"可分配订单",command:"0"},
          {status:"库房出库订单",command:"1"},
           {status:"分库房到货订单",command:"2"},
         {status:"已分配订单",command:"3"},
         {status:"已领货订单",command:"4"},
         {status:"已完成订单",command:"5"},
         {status:"无效订单",command:"6"},
      ],

      selectedRow: null



    }
  },
  methods: {

    handleSeletion(rows){
      this.tableData.forEach((row) => {
        row.selected = false;
      });

      if (rows.length > 0) {
        rows[0].selected = true;
      }
    },

//修改订单状态
    handleCommand(command){
      console.log(command.oid+"  "+command.status)
      request_user.post("order/change",{
       oid:command.oid,
        status:command.status
      }).then(res=>{
        console.log(res.data)
        if (res.data.code===200){
          this.$message({
            message: '修改订单状态成功',
            type: 'success'
          });
          if(this.isSearch){
           this.search()
          }else {
            this.getAllOrders()
          }
        }else {
          this.$message({
            message: '修改订单状态失败',
            type: 'error'
          });
        }
      })



},

  //根据订单id查询订单
    search(){
      if(!this.isSearch){
        this.isSearch=true
      }
      request_user.post('order/findById',
          {
            oid:this.input,
          }).then(res=>{
        let data = res.data.data
        console.log(res.data)
        this.tableData=[]
        this.tableData.push(data)
      })
    },
    //表格索引获取
    getIndex(index) {
      index = index + 1 + (this.pageNow - 1) * this.pageSize
      return index
    },
    //换页
    pageChange(val) {
      this.pageNow = val
      this.getAllOrders()
    },
  //获取所有的订单
  getAllOrders() {
    request_user.post("order/all", {
      pageNum: this.pageNow,
      pageSize: this.pageSize
    }).then(res => {
      console.log(res.data);
      let data = res.data.data
      this.tableData = data.list;
      this.totalSize = data.total
    })
  }

},
  beforeMount() {
    this.getAllOrders()
  },
  watch:{
    "input":{
      handler(n,o){
        if(n===''){
          this.getAllOrders()
          this.isSearch=false
        }
      }
    }
  }
}
</script>

<style>
.head{
  margin: 10px 0;
  text-align: left;
}
.search{
  width: 100px;
  margin-right: 10px;
}
</style>